<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/amazeui.css" />
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="iconfont.css" />
		<link rel="stylesheet" type="text/css" href="load/load.css" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				max-width: 640px;
				margin: auto;
			}
			
			.top {
				height: 50px;
				line-height: 50px;
				text-align: center;
				background-color: #FF608E;
			}
			
			.top span {
				color: white;
				font-size: 18px;
				font-weight: bold;
				color: white;
			}
			
			.ss {
				display: -webkit-box;
				padding: 10px;
				height: 50px;
				background-color: white;
			}
			
			.ss>div {
				height: 30px;
				display: -webkit-box;
				position: relative;
				-webkit-box-align: center;
				-webkit-box-flex: 1;
				font-size: 14px;
			}
			
			.ss input {
				border: 1px solid #FF608E;
				display: -webkit-box;
				-webkit-box-flex: 1;
				color: #999999;
				height: 30px;
				outline: none;
				padding-left: 5px;
				border-radius: 10px;
				padding-right: 60px;
			}
			
			.ss>div>div {
				position: absolute;
				top: 0px;
				right: 0px;
				cursor: pointer;
				width: 50px;
				text-align: center;
				background-color: #FF608E;
				height: 30px;
				line-height: 30px;
				color: white;
				border-bottom-right-radius: 10px;
				border-top-right-radius: 10px;
			}
			
			.tab {
				display: -webkit-box;
				height: 60px;
				border-bottom: 1px solid #FF608E;
			}
			
			.tab a {
				margin: 5px;
				font-size: 14px;
				font-weight: bold;
				color: #FF608E;
				display: -webkit-box;
				-webkit-box-flex: 1;
				-webkit-box-align: center;
				-webkit-box-pack: center;
				border: 1px solid #FF608E;
				border-radius: 10px;
				opacity: 0;
			}
			/*.tab a:nth-child(1) {
				color: #4AAA4A;
			}
			
			.tab a:nth-child(2) {
				color: #FF608E;
			}
			
			.tab a:nth-child(3) {
				color: #C85E0B;
			}*/
			
			.tuijian {
				border-radius: 10px;
				height: 60px;
				margin: 10px;
				text-align: center;
				line-height: 60px;
				color: #808080;
			}
			
			#myfoot a {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-box-align: center;
				-webkit-box-pack: center;
			}
			
			#myfoot span:first-of-type {
				font-size: 16px;
			}
			
			.xximg img {
				width: 100%;
			}
			
			.xinxi {
				padding-top: 30px;
				border-top: 1px solid #FF608E;
				position: relative;
				margin-bottom: 5px;
			}
			
			.iteminfo {
				border: 1px solid #3BB4F2;
				font-size: 14px;
				margin: 0px 5px;
				padding: 5px;
				text-indent: 2em;
				border-radius: 10px;
				margin-bottom: 10px;
			}
			
			.xxfoot {
				position: absolute;
				bottom: 0px;
				left: 0px;
				display: -webkit-box;
				background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
				width: 100%;
				padding: 10px;
			}
			
			.xxleft {
				text-align: center;
				margin-right: 10px;
			}
			
			.xxleft img {
				width: 60px;
				border-radius: 30px;
				border: 3px solid white;
			}
			
			.xxright {
				-webkit-box-flex: 1;
				box-sizing: border-box;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-box-pack: center;
				-webkit-box-align: center;
				font-size: 14px;
				color: white;
			}
			
			.xxright div:last-of-type {
				color: #FF608E;
			}
			
			.icon-jia {
				color: #04BE02;
				font-size: 19px;
			}
			
			.infodiv {
				margin: 5px;
				border-radius: 10px;
				text-align: center;
				line-height: 60px;
				height: 60px;
				background-color: #10AEFF;
				color: white;
			}
			
			.am-modal-bd span {
				color: #FF608E;
			}
			
			#my-alert {
				font-size: 14px;
			}
			
			.cometop {
				position: fixed;
				bottom: 70px;
				right: 10px;
				font-size: 60px;
				width: 60px;
				height: 60px;
				line-height: 60px;
				color: #FF608E;
			}
		</style>
	</head>

	<body>

		<div class="top">
			<span>Y & M</span>
		</div>
		<div class="ss" data-am-sticky="{animation: 'slide-top'}">
			<div class="am-btn-block">
				<input placeholder="搜索摄影师/司仪/酒店" v-model="searchdiv" />
				<div @click="search">
					搜索
				</div>
			</div>
		</div>
		<!--搜索模版-->
		<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
			<div class="am-modal-dialog">
				<div class="am-modal-hd">空空如也...</div>
				<div class="am-modal-bd">
					试试输入<span>摄影师/酒店/司仪</span>！
				</div>
				<div class="am-modal-footer">
					<span class="am-modal-btn">确定</span>
				</div>
			</div>
		</div>
		<!--轮播-->
		<div class="am-slider am-slider-default" data-am-flexslider="{playAfterPaused: 3000}">
			<ul class="am-slides">
				<li><img src="index/img/weimeihuabanwomenjiehunlabeijingshipin_7922213.jpg" /></li>
				<li><img src="index/img/411a91a21dde00f9f8757515aedeed4b.jpeg" /></li>
			</ul>
		</div>
		<!--三个divtab-->
		<div class="tab">
			<a href="page2/page2.html">摄影师</a>
			<a href="page2/page2b.html">司仪</a>
			<a href="page2/page2c.html">酒店</a>
		</div>
		<!--热门推荐-->
		<div class="tuijian">
			热门推荐
		</div>
		<a href="page2/page2.html">
			<div class="infodiv">
				职业摄影师
			</div>
		</a>
		<!--load图-->
		<div class="csshub-loading" v-if="load">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<!--详细内容-->
		<div class="main">
			<div class="bigxx" v-for="item in numa" @click="tiaozhuan(item.id)">
				<div class="xinxi">
					<div class="xximg"><img :src="item.attributes.work[0].main[0]" /></div>
					<div class="xxfoot">
						<div class="xxleft"><img :src="item.attributes.headimg" /></div>
						<div class="xxright">
							<div>职业摄影师</div>
							<div v-html="item.attributes.name">我的巧克力</div>
						</div>
					</div>
				</div>
				<div class="iteminfo" v-html="item.attributes.introduce">
					我才萨洛克三季度卡了我决定安静的晴空万里金额啊件大事啊胜利大街
				</div>
			</div>
			<!--<div class="bigxx">
				<div class="xinxi">
					<div class="xximg"><img src="../page2/img/1-1F316113015-50.jpg" /></div>
					<div class="xxfoot">
						<div class="xxleft"><img src="img/rBACFFUVBwnBF3TrAAAYJHqI0OY560_200x200_3.jpg" alt="" /></div>
						<div class="xxright">
							<div>我的巧克力</div>
							<div>深情大司仪</div>
						</div>
					</div>
				</div>
				<div class="iteminfo" v-html="item.">
					我才萨洛克三季度卡了我决定安静的晴空万里金额啊件大事啊胜利大街
				</div>
			</div>-->
		</div>
		<a href="page2/page2b.html">
			<div class="infodiv">
				深情大司仪
			</div>
		</a>
		<!--load图-->
		<div class="csshub-loading">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<!--详细内容-->
		<div class="main">
			<div class="bigxx" v-for="item in numb" @click="tiaozhuan(item.id)">
				<div class="xinxi">
					<div class="xximg"><img :src="item.attributes.work[0].main[0]" /></div>
					<div class="xxfoot">
						<div class="xxleft"><img :src="item.attributes.headimg" /></div>
						<div class="xxright">
							<div>深情大司仪</div>
							<div v-html="item.attributes.name">我的巧克力</div>
						</div>
					</div>
				</div>
				<div class="iteminfo" v-html="item.attributes.introduce">
					我才萨洛克三季度卡了我决定安静的晴空万里金额啊件大事啊胜利大街
				</div>
			</div>
		</div>
		<a href="page2/page2c.html">
			<div class="infodiv">
				皇家酒店
			</div>
		</a>
		<!--load图-->
		<div class="csshub-loading">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<!--详细内容-->
		<div class="main">
			<div class="bigxx" v-for="item in numc" @click="tiaozhuanb(item.id)">
				<div class="xinxi">
					<div class="xximg"><img :src="item.attributes.imgs[0]" /></div>
					<div class="xxfoot">
						<div class="xxright">
							<div v-html="item.attributes.name">我的巧克力</div>
						</div>
					</div>
				</div>
				<div class="iteminfo" v-html="item.attributes.info">
					我才萨洛克三季度卡了我决定安静的晴空万里金额啊件大事啊胜利大街
				</div>
			</div>
		</div>
		<!--返回顶部-->
		<div class="cometop" onclick="cometop()" v-if="top>50">
			<span class="Hui-iconfont Hui-iconfont-arrow3-top"></span>
		</div>
		<!--脚步导航-->
		<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default " id="myfoot">
			<ul class="am-navbar-nav am-cf am-avg-sm-4">
				<li>
					<a href="index.html">
						<span class="Hui-iconfont  Hui-iconfont-home"></span>
						<span class="am-navbar-label">主页</span>
					</a>
				</li>
				<li>
					<a href="page2/page2.html">
						<span class="Hui-iconfont Hui-iconfont-moban-2"></span>
						<span class="am-navbar-label">详情</span>
					</a>
				</li>
				<li>
					<a href="page3/page3.html">
						<span class="Hui-iconfont Hui-iconfont-comment"></span>
						<span class="am-navbar-label">信息</span>
					</a>
				</li>
				<li>
					<a href="page4/page4.html">
						<span class="Hui-iconfont Hui-iconfont-avatar"></span>
						<span class="am-navbar-label">个人中心</span>
					</a>
				</li>
			</ul>
		</div>
		<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/amazeui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="index/vue/myvue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//返回顶部
			function cometop() {
				$('html, body').animate({
					scrollTop: 0
				}, 1000);
			}

			//初始动画
			$(".tab a").each(function(i) {
					$(this).animate({
						opacity: 1
					}, (i + 1) * 900);
				})
				//轮播
			$('#your-slider').flexslider({
				playAfterPaused: 8000,
				before: function(slider) {
					if(slider._pausedTimer) {
						window.clearTimeout(slider._pausedTimer);
						slider._pausedTimer = null;
					}
				},
				after: function(slider) {
						var pauseTime = slider.vars.playAfterPaused;
						if(pauseTime && !isNaN(pauseTime) && !slider.playing) {
							if(!slider.manualPause && !slider.manualPlay && !slider.stopped) {
								slider._pausedTimer = window.setTimeout(function() {
									slider.play();
								}, pauseTime);
							}
						}
					}
					// 设置其他参数
			});
			//滚动条滚动
			$(document).scroll(function() {
				myvue.top = $(document).scrollTop();
			});
		</script>
	</body>

</html>